<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../css/gxEcharts.css">
</head>
<body>
<div class="echartsFluid">
  <div class="echartsRow">
    <div class="echartsCol12">
      <div class="echartsBox">
        <div id="echarts_fjdxyj" class="echartsList"></div>
      </div>
    </div>
  </div>
</div>

<script src="../bower_components/echarts/dist/echarts.min.js"></script>
<script src="../js/gxEcharts.js"></script>
<script>
  var myChart = echarts.init(document.getElementById('echarts_fjdxyj'));
  myChart.setOption({
    title:{
      text:'堆叠区域图',
      textStyle:{
        color:'#fff',
        lineHeight:40,
        rich:{
          a:{
            lineHeight:40
          }
        }
      },
      left:'center'
    },
    tooltip : {
      trigger:'axis',
      axisPointer:{
        type:'shadow'//鼠标移入用透明柱状方式显示
      },
    },
    legend:{
      show:false,
      data:['飞机']
    },
    xAxis:{
      type:'category',
      axisLine:{
        show:true,
        lineStyle:{
          color:'#8C8C8C'//X轴颜色
        }
      },
      splitLine:{
        show:true,
        lineStyle:{
          color:'#8C8C8C'//纵向分割线颜色
        }
      },
      axisLabel:{
        rotate:30,//x轴刻度标签旋转
        color:'#fff'//X轴刻度标签颜色
      },
      axisTick:{
        data:'value'
      },
      data:['6号飞机','7号飞机','5号飞机','4号飞机','9号飞机','10号飞机','20号飞机','11号飞机','19号飞机','8号飞机','18号飞机','17号飞机','16号飞机','15号飞机','14号飞机','13号飞机','12号飞机','3号飞机','1号飞机','2号飞机']
    },
    yAxis:{
      type:'value',
      axisLabel : {
        formatter: '{value}'
      },
      axisLine:{
        lineStyle:{
          color:'#8C8C8C'//y轴字颜色
        }
      },
      axisTick:{
        show:false//y轴【左侧】刻度不显示
      },
      splitLine:{
        show:true,
        lineStyle:{
          color:'#8C8C8C'//横向分割线颜色
        }
      },
      axisLabel:{
        color:'#fff'//y轴刻度标签颜色
      }
    },
    series: [
      {
        name:'飞机',
        type: 'bar',
        barWidth:10,
        data: [22, 32, 26, 15, 16, 30, 38, 50, 55, 60, 78, 80, 82, 90, 100, 101, 120, 150, 160, 165],
        itemStyle:{
          normal:{
            color:function(argument){
              var number = argument.value;
              if(number < 30){
                return {
                  type:'line',
                    x:0,
                    y:0,
                    x2:0,
                    y2:1,
                    colorStops:[
                    {offset:0,color:'#E00000'},
                    {offset:1,color:'#7B0303'}
                  ]
                };
              }else{
                return '#4F435E';
              }
            },
            barBorderColor:'#8A5A92'
          }
        }
      }
    ]
  });
</script>
</body>
</html>